﻿@extends('layouts.shop_main')

@section('title', '首页')

@section('resources')
    @parent
    <style>
        .index_timer{overflow: hidden;margin: 15px 40px;}
        .index_timer li{float: left;margin-left: 10px;font-size: 16px;}
        .main-stats .title{margin: 20px 50px;font-size: 16px;border-left: 3px solid #9955c6;padding-left: 20px;}
        .main-stats .isdouble{margin: 20px 50px;font-size: 16px;padding-left: 23px;}
        .spread{margin: 10px 50px;font-size: 16px;color: #9955c6;}
    </style>
@endsection

@section('content')
	<!-- main container -->
    <div class="content">
        <ul class="index_timer">
            <li>2017-03-08</li>
            <li>星期五</li>
            <li>妇女节</li>
        </ul>
        <div class="main-stats">
            <div class="row stats-row">
                <div class="col-md-3 col-sm-3 stat">
                    <div class="data">
                        <span class="number">2457</span>
                    </div>
                    <span class="date">今天订单数</span>
                </div>
                <div class="col-md-3 col-sm-3 stat">
                    <div class="data">
                        <span class="number">3240</span>
                    </div>
                    <span class="date">今日订单消费金额</span>
                </div>
                <div class="col-md-3 col-sm-3 stat">
                    <div class="data">
                        <span class="number">322</span>
                    </div>
                    <span class="date">今日地推注册数</span>
                </div>
                <div class="col-md-3 col-sm-3 stat last">
                    <div class="data">
                        <span class="number">$2,340</span>
                    </div>
                    <span class="date">今日地推收入(元)</span>
                </div>
            </div>
        </div>
        <!-- 单门店展示 -->
        <!-- <div class="pad-wrapper">
            <div class="row chart">
                <div class="col-md-12">
                    <h4 class="clearfix">
                        最近7个翻倍日订单数变化
                    </h4>
                </div>
                <div class="col-md-12">
                    <div id="statsChart"></div>
                </div>
            </div>
        </div> -->
        <!-- 多门店展示 -->
        <ul>
            <li class="main-stats">
                <p class="title">罗纳咖啡(新建中心店)</p>
                <p  class="isdouble">今天是翻倍日</p>
                <div class="row stats-row">
                    <div class="row stats-row">
                        <div class="col-md-3 col-sm-3 stat">
                            <div class="data">
                                <span class="number">2457</span>
                            </div>
                            <span class="date">今天订单数</span>
                        </div>
                        <div class="col-md-3 col-sm-3 stat">
                            <div class="data">
                                <span class="number">3240</span>
                            </div>
                            <span class="date">今日订单消费金额</span>
                        </div>
                        <div class="col-md-3 col-sm-3 stat">
                            <div class="data">
                                <span class="number">322</span>
                            </div>
                            <span class="date">今日地推注册数</span>
                        </div>
                        <div class="col-md-3 col-sm-3 stat last">
                            <div class="data">
                                <span class="number">$2,340</span>
                            </div>
                            <span class="date">今日地推收入(元)</span>
                        </div>
                    </div>
                </div>
                <div class="pad-wrapper" style="padding: 0 50px;">
                    <div class="row chart">
                        <p  class="spread">最近7个翻倍日订单数变化</p>
                        <div class="col-md-12">
                            <div id="statsChart"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="main-stats">
                <p class="title">罗纳咖啡(新建中心店)</p>
                <p  class="isdouble">今天是翻倍日</p>
                <div class="row stats-row">
                    <div class="row stats-row">
                        <div class="col-md-3 col-sm-3 stat">
                            <div class="data">
                                <span class="number">2457</span>
                            </div>
                            <span class="date">今天订单数</span>
                        </div>
                        <div class="col-md-3 col-sm-3 stat">
                            <div class="data">
                                <span class="number">3240</span>
                            </div>
                            <span class="date">今日订单消费金额</span>
                        </div>
                        <div class="col-md-3 col-sm-3 stat">
                            <div class="data">
                                <span class="number">322</span>
                            </div>
                            <span class="date">今日地推注册数</span>
                        </div>
                        <div class="col-md-3 col-sm-3 stat last">
                            <div class="data">
                                <span class="number">$2,340</span>
                            </div>
                            <span class="date">今日地推收入(元)</span>
                        </div>
                    </div>
                </div>
                <div class="pad-wrapper" style="padding: 0 50px;">
                    <div class="row chart">
                        <p  class="spread">最近7个翻倍日订单数变化</p>
                        <div class="col-md-12">
                            <div id="statsChart"></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
@endsection

@section('scriptResources')
    @parent
    <script>
        // jQuery Flot Chart
            var visits = [[1, 50], [2, 40], [3, 45], [4, 23],[5, 55],[6, 65],[7, 61],[8, 70],[9, 65],[10, 75],[11, 57],[12, 59]];
            var visitors = [[1, 25], [2, 50], [3, 23], [4, 48],[5, 38],[6, 40],[7, 47],[8, 55],[9, 43],[10,50],[11,47],[12, 39]];
            // $(".spread").click(function(){
            //     var i =$(this).parent().parent().parent().index();
            //     // alert(i)
            //     var chart = $('<div id="statsChart'+i+'"></div>')
            //     $(".spread").siblings(".col-md-12").prepend(chart)
                
            // })
            var plot = $.plot($("#statsChart"),
                [ { data: visits, label: "Signups"},
                     { data: visitors, label: "Visits" }], {
                        series: {
                            lines: { show: true,
                                    lineWidth: 1,
                                    fill: true, 
                                    fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
                                 },
                            points: { show: true, 
                                     lineWidth: 2,
                                     radius: 3
                                 },
                            shadowSize: 0,
                            stack: true
                        },
                        grid: { hoverable: true, 
                               clickable: true, 
                               tickColor: "#f9f9f9",
                               borderWidth: 0
                            },
                        legend: {
                                // show: false
                                labelBoxBorderColor: "#fff"
                            },  
                        colors: ["#a7b5c5", "#30a0eb"],
                        xaxis: {
                            ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4,"APR"], [5,"MAY"], [6,"JUN"], 
                                   [7,"JUL"], [8,"AUG"], [9,"SEP"], [10,"OCT"], [11,"NOV"], [12,"DEC"]],
                            font: {
                                size: 12,
                                family: "Open Sans, Arial",
                                variant: "small-caps",
                                color: "#697695"
                            }
                        },
                        yaxis: {
                            ticks:3, 
                            tickDecimals: 0,
                            font: {size:12, color: "#9da3a9"}
                        }
                     });
    </script>
@endsection